<template>
<div class="index">
  <!-- start 全局统计卡片展示 -->
  <el-row :gutter="10" class="cards-group">
    <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6" v-for="(card,index) in cards" :key="index">
      <el-card class="box-card" :class="card.style">
        <span class="sub-text">{{card.increaseNumber}}<i class="el-icon-caret-top" v-if="card.increase" title="增长"></i><i class="el-icon-caret-bottom" v-if="!card.increase" title="下降"></i></span>
        <h2 class="number">{{card.count}}</h2>
        <p class="title">{{card.name}}</p>
      </el-card>
    </el-col>
  </el-row>
  <!-- end 全局统计卡片展示 -->
  <!-- start 快捷入口 -->
  <el-row :gutter="10" class="quick-links-group">
    <el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="3" v-for="(item,index) in quickLinks" :key="index">
      <el-card class="box-card" shadow="hover">
        <el-avatar :src="item.icon" shape="square"></el-avatar>
        <div class="item-content">
          <h2>{{item.name}}</h2>
          <p>{{item.desc}}</p>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <!-- end 快捷入口 -->
  <!-- start 仪表盘统计组 -->
  <el-row class="dashboard-group">
    <el-col>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="card-header">
          <span class="title">访问统计</span>
          <el-date-picker v-model="valueDate" align="right" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" size="small" style="width:250px;">
          </el-date-picker>
        </div>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="8">
            <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
          </el-col>
          <el-col :xs="24" :sm="8">
            <el-progress type="dashboard" :percentage="percentage2" :color="colors"></el-progress>
          </el-col>
          <el-col :xs="24" :sm="8">
            <el-progress type="dashboard" :percentage="percentage3" :color="colors"></el-progress>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <!-- end 仪表盘统计组 -->
  <!-- start 统计曲线组 -->
  <el-row :gutter="10" class="charts-group">
    <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="card-header">
          <span class="title">访问统计</span>
          <el-date-picker v-model="valueDate" align="right" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" size="small" style="width:250px;">
          </el-date-picker>
        </div>
        <ChartsLine></ChartsLine>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="card-header">
          <span class="title">供应/销售统计</span>
          <el-date-picker v-model="valueDate2" size="small" type="month" placeholder="选择月" style="width:120px;">
          </el-date-picker>
        </div>
        <Radar></Radar>
      </el-card>
    </el-col>
  </el-row>
  <!-- end 统计曲线组 -->
</div>
</template>

<script>
import ChartsLine from '@/components/home/ChartsLine.vue'
import Radar from '@/components/home/Radar.vue'
export default {
  name: 'Index',
  components: {
    ChartsLine,
    Radar
  },
  data() {
    return {
      cards: [{
          name: '供应商数量',
          count: '892,752',
          increase: true,
          increaseNumber: '25%',
          style: 'bg1'
        },
        {
          name: '新增供应商入驻申请',
          count: '52',
          increase: true,
          increaseNumber: '5%',
          style: 'bg2'
        }, {
          name: '总商品数量',
          count: '1,892,752',
          increase: true,
          increaseNumber: '25%',
          style: 'bg3'
        }, {
          name: '新增商品数量',
          count: '2,784',
          increase: false,
          increaseNumber: '-5%',
          style: 'bg4'
        }
      ],
      quickLinks: [{
          name: "功能名称",
          desc: '功能描述文字',
          path: '/',
          icon: require('@/assets/icon_user.png')
        },
        {
          name: "功能名称",
          desc: '功能描述文字',
          path: '/',
          icon: require('@/assets/icon_msg.png')
        }, {
          name: "功能名称",
          desc: '功能描述文字',
          path: '/',
          icon: require('@/assets/icon_chart.png')
        }, {
          name: "功能名称",
          desc: '功能描述文字',
          path: '/',
          icon: require('@/assets/icon_heart.png')
        }, {
          name: "功能名称",
          desc: '功能描述文字',
          path: '/',
          icon: require('@/assets/icon_circle.png')
        }, {
          name: "功能名称",
          desc: '功能描述文字',
          path: '/',
          icon: require('@/assets/icon_menu.png')
        }
      ],
      percentage: 10,
      percentage2: 40,
      percentage3: 80,
      colors: [{
          color: '#f56c6c',
          percentage: 20
        },
        {
          color: '#e6a23c',
          percentage: 40
        },
        {
          color: '#5cb87a',
          percentage: 60
        },
        {
          color: '#1989fa',
          percentage: 80
        },
        {
          color: '#6f7ad3',
          percentage: 100
        }
      ],
      valueDate: '',
      valueDate2: '2020-02',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods: {
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.index {
    height: 100%;
    .cards-group {
        .box-card {
            height: 104px;
        }
    }
    .quick-links-group {
        ::v-deep.box-card {
            .el-card__body {
                display: flex;
                align-items: center;
                .el-avatar {
                    margin-right: 10px;
                    background-color: #FFF;
                }
                .item-content {
                    h2 {
                        font-weight: 800;
                        margin-bottom: 5px;
                    }
                    p {
                        font-size: 12px;
                        color: @color-placeholder;
                    }
                }
            }
        }
    }
}

.box-card {
    line-height: 1;
    margin-bottom: 15px;
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
            font-weight: 800;
        }
    }
    .sub-text {
        i {
            margin-left: 5px;
        }
    }
    .number {
        font-size: 24px;
        font-weight: 800;
        padding: 5px 0;
    }
    &.bg1 {
        color: #FFF;
        background-image: linear-gradient(120deg,#3E82EE 0,#00C8EE 100%);
    }
    &.bg2 {
        color: #FFF;
        background-image: linear-gradient(120deg,#6CDEB0 0,#B9F39C 100%);
    }
    &.bg3 {
        color: #FFF;
        background-image: linear-gradient(120deg,#C77BE6 0,#EA9AFF 100%);
    }
    &.bg4 {
        color: #FFF;
        background-image: linear-gradient(120deg,#FD9E8A 0,#FFECCA 100%);
    }
}
</style>
